<template>
    <Panel :class="$style.panel" title="新品推荐">
        <section :class="$style.content">
            <div :class="$style.arrow">更多尖货 ></div>
            <Slider :options="options" :items="items" class="product_slider"/>
        </section>
    </Panel>
</template>

<script>
    import Panel  from '../core/panel.vue'
    import Slider from '../core/slider.vue'
    export default {
        components : {
            Panel,
            Slider
        },

        data(){
            return {
                items : [
                    {
                        href : 'home',
                        src  : '//img12.360buyimg.com/jrpmobile/jfs/t24034/237/2596944199/36633/ee35259c/5b89084dN104f748b.jpg?width=335&height=421'
                    },
                    {
                        href : 'home',
                        src  : '//img12.360buyimg.com/jrpmobile/jfs/t27823/115/186566632/43730/5981d84c/5b89085eN86237342.jpg?width=335&height=421'
                    },
                    {
                        href : 'home',
                        src  : '//img12.360buyimg.com/jrpmobile/jfs/t27763/129/181005507/38624/7fd58e9c/5b89086cN16631b6e.jpg?width=335&height=421home'
                    },
                    {
                        href : 'home',
                        src  : '//img12.360buyimg.com/jrpmobile/jfs/t27823/115/186566632/43730/5981d84c/5b89085eN86237342.jpg?width=335&height=421'
                    }
                ],

                options : {
                    slidesPerView : 2,
                    spaceBetween  : 30,
                    freeMode      : true,
                    // pagination    : {
                    //     el        : '.swiper-pagination',
                    //     clickable : true
                    // }
                }

            }
        }
    }
</script>

<style lang="scss">
    .product_slider {
        .swiper-container {
            box-sizing: border-box;
            padding-left: 24px;
            padding-right: 24px;

            .swiper-slide {
                a {
                    display: inline-block;
                    width: 100%;

                    img {
                        width: 100%;
                        height: 314px;
                        display: block;
                        border: 1px solid #fafafa;
                    }
                }
            }
        }
    }
</style>

<style lang="scss" module>
    @import '../../css/element.scss';
    .panel {
        @include panel;

        .content {
            padding-bottom: 40px;
            position: relative;

            .arrow {
                position: absolute;
                right: 20px;
                top: -70px;
                font-size: 28px;
                color: #999;
            }
        }
    }
</style>

